<template>
    <div>
      <vTitle page="4" @clickToSearch="clickSearchGoods" @transferUser="back1"></vTitle>
      <tab :line-width="1" custom-bar-width="60px" active-color="#33bb99">
        <tab-item :selected="tabIndex==index?true:false" v-for="(item,index) in tabList" :key="index" @on-item-click="onItemClick">{{item.text}}</tab-item>
      </tab>
      <div v-if="none" style="padding-top:50px;line-height:20px;font-size:0.8rem;text-align:center;color:#999;">您搜索的关键字没有结果<br>请输入其它关键字进行搜索</div>
      <div class="search-list">
        <ul>
          <li class="search-item" v-for="(item,index) in tabIndex==0?goodsList:shopList" :key="index">
            <div class="item-text">
              <div class="item-img" @click="tabIndex==0?showDetail(item):toShop(item)">
                <img :src="tabIndex==0?config1.fileUrl+item.imgList[0].img_url:item.head_url?item.head_url:'http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/none_upload.png'">
              </div>
              <p @click="tabIndex==0?showDetail(item):toShop(item)">{{tabIndex==0?item.goods_name:item.company_name}}</p>
              <div class="item-tip" v-show="tabIndex==0">
                <span>销量：{{item.sales_num}}</span>
                <i class="iconfont icon-dianpu" @click="toShop(item)"></i>
              </div>
              <div class="item-address" v-if="tabIndex==1" @click="toShop(item)">
                <i class="iconfont icon-dizhi"></i><span>{{item.detailed_address}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-transfer-dom>
        <popup v-model="isStore" height="100%" style="background: #fbf9fe">
          <vTitle page="2" @transferUser="back2"></vTitle>
          <vStore v-if="isStore" v-bind:text="text" v-bind:type="type"></vStore>
        </popup>
      </div>
      <div v-transfer-dom>
        <popup v-model="tabIndex==0?isShowDetail:isShowShop" height="100%">
          <vTitle page="3" @transferUser="back" v-bind:title="tabIndex==0?'商品详情':'店铺详情'"></vTitle>
          <vDetail v-if="isShowDetail" v-bind:goodsId="goodsId" v-bind:state="isShowDetail"></vDetail>
          <vShop v-if="isShowShop" v-bind:supplyId="supplyId" v-bind:state="isShowShop"></vShop>
        </popup>
      </div>
      <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :text="toastMsg" :position="position"></toast>
    </div>
</template>

<script>
  import vTitle from './Title'
  import vDetail from './Detail'
  import vShop from './Shop'
  import vStore from './Store'
  import { Tab, TabItem, Popup } from 'vux';
  export default {
    name: "",
    components: {
       vTitle, Tab, TabItem, vDetail, Popup, vShop, vStore
    },
    data () {
      return {
        tabIndex:0,
        tabList:[{text:'商品'},{text:'店铺'}],
        none:false,
        goodsList:[],
        shopList:[],
        isShowDetail:false,
        isShowShop:false,
        isStore:false,

        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
        start:1
      }
    },
    methods:{
      // 查看商品详情
      showDetail(item){
        if(this.tabIndex==0){
          this.isShowDetail = true
          this.goodsId = item.id
        }else{
          this.isShowShop = true
          this.supplyId = item.id
        }
      },
      toShop(text){
        this.text = text
        this.type = this.tabIndex==0?0:1
        this.isStore = true
      },
      back2(msg){
        this.isStore = msg
      },
      back(msg){
        this.isShowDetail = msg
        this.isShowShop = msg
      },
      // 选择搜索店铺/商品
      onItemClick(index){
        this.tabIndex = index
        this.none = false
        this.goodsList = []
      },
      back1(msg){
        window.history.go(-1);
      },
      // 搜索
      clickSearchGoods(msg){
        if(!msg.state) return
        if(!msg.text) return
        let url = this.tabIndex==0?'/purchasers/app/goods/findGoods':'/purchasers/app/supply/findSupplyByName'
        let obj = this.tabIndex==0?{
          start:this.start,
          goodsClassificationId:'',
          supplyId:'',
          goodsName:msg.text
        }:{
          start:this.start,
          supplyName:msg.text
        }
        this.$vux.loading.show();
        this.config1.post(url, obj).then(res => {
          this.$vux.loading.hide();
          if (res.data.code === '0') {
            if(res.data.page.list.length==0){
              this.none = true
              return;
            }
            if(this.tabIndex==0){
              this.goodsList = res.data.page.list
            }else{
              this.shopList = res.data.page.list
            }
            this.none = false
          } else {
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  *{list-style-type: none;font-family: 微软雅黑;}
.search-list{
  padding-left: 0.5rem;
  .search-item{
    width: 33%;
    float: left;
    margin-top:10px;
    .item-text{
      width: 95%;
      background: #fff;
      margin:0 auto;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 8px #eae9ec;
      line-height: 2rem;
      .item-img{
        height:110px;
        img{
          height:100%;
          width:100%;
        }
      }
      p{
        font-size: 0.8rem;
        display: block;
        white-space: nowrap;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      .item-tip{
        padding:0 0.5rem;
        .iconfont{
          color:#33bb99;
          float: right;
        }
        span{
          color: #999;
          font-size: 0.6rem;
        }
      }
      .item-address{
        font-size: 0.6rem;
        display: block;
        line-height:1.5rem;
        white-space: nowrap;
        /*width: 90%;*/
        /*margin: 0 auto;*/
        overflow: hidden;
        text-overflow:ellipsis;
        .iconfont{
          color:#33bb99;
          padding:0 0.2rem 0 0.3rem;
        }
      }
    }
  }
}
</style>
